<template>
  <div>
    <el-dialog
      v-model="dialogVisibles"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      @close = "share_cancel()"
      width="40%"
    >
      <template #header>
        <div class="customerTitle2">{{title}}}<span class="title1"></span></div>
      </template>
      <div>
        {{content}}
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        status-icon
      >
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="ruleForm.reason" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <span class="dialog-footer customerDialog3">
            <el-button @click="share_cancel()">取消</el-button>
             <el-button type="primary"  @click="share_save(ruleForm)">提交</el-button>
        </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const title = ref<String>('')
const content = ref<String>('')
const $emits = defineEmits(['shareCancel'])
const dialogVisibles = ref<any>(undefined)
const share_cancel = ()=>{
  dialogVisibles.value=undefined

}
const share_save = async (formEl: any) => {
  if (!formEl) return
  await formEl.validate((valid:any) => {
    if (valid) {
      $emits('shareCancel',111)
    }
  })
}
const ruleForm = reactive<any>({
  reason: '',
})

const rules = reactive<any>({
  reason: [
    { required: true, message: '请输入取消原因', trigger: 'blur' },
  ],
})
</script>

<style lang="scss" scoped>

</style>

